<template>
  <el-dialog
    title="忽略异常"
    :visible.sync="dialogVisible"
    :modal="true"
    :appendToBody="true"
    width="36%"
    v-dialog-drag
    :close-on-click-modal="false"
    top="5vh"
    @close="handleClose()"
    @open="handleOpen()"
  >
    <el-form :model="form" :rules="rules" ref="ruleForm" label-width="100px">
      <el-form-item label="忽略原因" prop='ignoreMark'>
        <el-select
          placeholder="忽略原因"
          clearable
          v-model="form.ignoreMark"
          size="small"
          @change="selectMark"
        >
          <el-option
            v-for="item in dict.ignoreMark"
            :key="item.codevalue"
            :label="item.codename"
            :value="item.codevalue"
          >
          </el-option>
        </el-select>
      </el-form-item>

      <el-form-item label="说明" prop='des' :class='form.ignoreMark == "ignoreOther" ? "is-required" : ""'>
        <el-input
          type="textarea"
          :autosize="{ minRows: 2}"
          maxlength="200"
          show-word-limit
          placeholder="请输入说明"
          v-model="form.des">
        </el-input>
      </el-form-item>
    </el-form>

    <span slot="footer" class="dialog-footer">
      <el-button @click="dialogVisible = false">取 消</el-button>
      <el-button type="primary" :loading="saveloading" @click="handleSubmit">确 定</el-button>
    </span>
  </el-dialog>
</template>
<script>
  import {abnormalIgnore,batchIgnore} from "@/api/exceptionMgmt/abnormal";
export default {
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    rows: {
      type: Array,
      default: ()=>[]
    }
  },
  dicts: ["ignoreMark"],
  data() {
    const validDes = (rule,value, callback) => {
      if(this.form.ignoreMark == "ignoreOther"){
        if(!value){
          return callback(new Error("请输入忽略说明"));
        }else{
          callback();
        }
      }else{
        callback();
      }
    };
    return {
      form: {
        id:null,
        ids:[],
        des: null,
        ignoreMark:null
      },
      rules: {
        ignoreMark: [
          { required: true, message: "请选择忽略原因", trigger: "change" },
        ],
        des: [
          {validator: validDes, trigger: "blur" },
        ]
      },
      submitType:"single",
      saveloading: false
    };
  },
  computed: {
    dialogVisible: {
      set(val) {
        this.$emit("update:visible", val)
      },
      get() {
        return this.visible
      }
    },
  },

  created(){
  },

  methods: {
    handleClose() {
      this.saveloading = false
      this.resetFormData()
    },

    handleOpen() {
      this.resetFormData();
      if (!this.rows?.length) {
        return [];
      }
      if(this.rows?.length == 1){
        this.form.id = this.rows[0]?.id;
        this.submitType = "single"
      }
      else{
        this.form.ids = this.rows.map((ele) => ele.id);
        this.submitType = "bath"
      }
    },

    handleSubmit(){
      this.saveloading = true
      this.$refs.ruleForm
      .validate((flag) => {
        if (flag) {
          if(this.submitType == "single"){
            this.submitSingle()
          }
          else{
            this.submitBath()
          }
        } else {
          this.saveloading = false
        }
      })
    },

    submitSingle() {
      let parmas = {
        id:this.form.id,
        des: this.form.des,
        ignoreMark:this.form.ignoreMark
      }
      abnormalIgnore(parmas).then(res => {
        if (res.code == 200) {
          this.msgSuccess("操作成功")
          this.$emit("submit-success")
          this.dialogVisible = false
        } else {
          this.msgError(res.msg || "操作失败")
        }
        this.saveloading = false
      }).catch(() => {
        this.msgError("操作失败")
        this.saveloading = false
      })
    },

    submitBath() {
      let parmas = {
        ids:this.form.ids,
        des: this.form.des,
        ignoreMark:this.form.ignoreMark
      }
      batchIgnore(parmas).then(res => {
        if (res.code == 200) {
          this.msgSuccess("操作成功")
          this.$emit("submit-success")
          this.dialogVisible = false
        } else {
          this.msgError(res.msg || "操作失败")
        }
        this.saveloading = false
      }).catch(() => {
        this.msgError("操作失败")
        this.saveloading = false
      })
    },
    selectMark(){
      this.$refs.ruleForm.clearValidate(['des']);
    },
    resetFormData() {
      this.$refs.ruleForm?.resetFields()
      this.form = {
        id:null,
        ids:[],
        des: null,
        ignoreMark:null
      };
    },
  }
};
</script>
<style lang="scss" scoped>
.el-form {
  // display: flex;
  // justify-content: space-between;
  // flex-flow: wrap;
  // .el-form-item {
  //   width: 49%;
  // }
  .el-date-editor.el-input,
  .el-select {
    width: 100%;
  }
}
.tool-bar{
  margin-bottom:20px
}
</style>
